<template>
  <div>
    <div>
       <el-form :inline="true" :model="jl" class="user-search">
      <el-form-item label="搜索：">
         <el-input size="small" v-model="jl.positionName" placeholder="职位名称" 
                style="width: 300px"></el-input>
      </el-form-item>
     

      <el-input size="small" v-model="jl.organizationName" placeholder="部门名称" 
      style="width: 300px"></el-input>

      <!-- <el-select v-model="jl.organizationName" placeholder="职位级别名称" style="margin-left: 8px" size="small">
        <el-option
            v-for="item in titleLevels"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
      </el-select> -->
    
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-edit" @click="flush">重置</el-button>
       </el-form>
      <el-button size="small" style="margin-left: 8px" icon="el-icon-plus" type="primary" @click="addJobLevel">添加</el-button>
    </div>

    <div style="margin-top: 10px" >
       <el-table
       :data="jls"
          stripe
          border
         @selection-change="handleSelectionChange"
    style="width: 100%"
    max-height="250">
     <el-table-column 
     fixed
     type="selection"
     width="55">
    </el-table-column>
     <el-table-column
            prop="id"
            label="关系ID"
            width="120">
        </el-table-column>
        <el-table-column
            prop="positioncode"
            label="职位编码"
            width="150">
        </el-table-column>
        <el-table-column
            prop="positionName"
            label="职位名称"
            width="150">
        </el-table-column>
        <el-table-column
            prop="organizationId"
            label="部门编码"
            width="150">
        </el-table-column>
        <el-table-column
            prop="organizationName"
            label="部门名称"
            width="150">
        </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="150">
       <template slot-scope="scope">
            <el-button size="small" @click="showEditDialog(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteHandler(scope.row)">删除</el-button>
          </template>
    </el-table-column>
  </el-table>
          <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    </div>
    <el-button type="danger" size="small" style="margin-top: 8px" :disabled="this.multipleSelection.length==0" @click="deleteMany">批量删除</el-button>
    <el-dialog
        title="编辑职位汇报关系"
        :visible.sync="dialogVisible"
        width="30%">
      <table>
        <tr>
            <el-tag>部门名称</el-tag>
          <td>
<el-input
 empty-text='暂无数据'
  v-model="filterText" v-if="filterText">
</el-input>
<el-tree
  class="filter-tree"
  :data="deps"
  :props="defaultProps"
  :node-key="deps.organizationName"
  :filter-node-method="depNode"
  ref="tree"
  :expand-on-click-node="false"
  @node-click="depclick"
  >  
 <span class="custom-tree-node" slot-scope="{ node, data }"
            style="display: flex;justify-content: space-between;width: 100%">
          <span>{{ data.organizationName }}  </span>
          <span>
          </span>
        </span>
</el-tree>
          </td>
        </tr>

        <tr>
            <el-tag>职位名称</el-tag>
          <td>
             <el-select @change="getMoney" v-model="positionName" filterable placeholder="请选择">
        <el-option v-for="item in positions" :key="item.id"  
            :label="item.positionName" :value="item.id">
       </el-option>
        </el-select>
          </td>
        </tr>
      </table>

      <span slot="footer" class="dialog-footer">
    <el-button @click="off()">取 消</el-button>
    <el-button type="primary"  @click="doUpdate()">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from "../../components/Pagination";
export default {
  name: "JobRelationMana",
  mounted() {
    this.initJls(this.pageparm);
  },
  // 注册组件
  components: {
    Pagination,
  },
  created() {
    // this.getdata(this.formInline)
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  data() {
    return {
      positionName: '',
      filterText: '',
      positions: [],
      defaultProps: {
        children: "children",
        label: "organizationName",
      },
      categorys: [],
      deps:[],
      category: "",
      //编辑判断(true)  添加判断(false)
      isCompile: false,
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      updateJl: {
        id: '',
        did: '',
        pid: ''},
      dialogVisible: false,
      jls: [],
      jl: {
        organizationName: "",
        positionName: "",
      },
      multipleSelection: [],
    };
  },
  methods: { getMoney(key) {
        this.updateJl.pid=key
      },
    //点击部门结构
    depclick(dada) {
      this.filterText = dada.organizationName;
       this.updateJl.did=dada.id
    },
    depNode(value, data) {
      if (!value) return true;
      return data.organizationName.indexOf(value) !== -1;
    },
    //查询所有position
    initdJob() {
      this.getRequest("/organization/sequence/allPos").then((res) => {
        if (res) {
          this. positions = res;
        }
      });

      //查询所有dep
      this.getRequest("/org/dep/allDep").then((resp) => {
        if (resp) {
          this.deps = resp;
        }
      });
    },
    // 搜索事件
    search() {
      this.callFather(this.pageparm);
    },
    // 重置事件
    flush() {
      (this.jl.positionName = ""), (this.jl.organizationName = "");
      this.initJls(this.pageparm);
    },
    //分页
    callFather(dada) {
      this.initJls(dada);
    },
    deleteMany() {
      this.$confirm(
        "此操作将永久删除[" +
          this.multipleSelection.length +
          "]条职称, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let ids = "?";
          this.multipleSelection.forEach((item) => {
            ids = item.id;
            this.deleteRequest("/organization/relation/" + ids).then(
              (resp) => {}
            );
          });
          this.initJls(this.pageparm);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //取消
    off() {
      this.dialogVisible = false;
      this.updateJl.did=''
      this.updateJl.pid=''
      this.updateJl.id=''
      this.category = ""
      this.positionName= ''
      this.filterText='请选择'
    },
    //确定
    doUpdate() {
      if (this.isCompile) {
         console.log("qqq",this.updateJl)
        this.putRequest("/organization/relation/", this.updateJl).then(
          (resp) => {
              this.initJls();
              this.dialogVisible = false;
              this.category = "";
              this.updateJl.did=''
              this.updateJl.pid=''
              this.updateJl.id=''
              this.filterText='请选择'
              this.positionName= ''
          }
        );
      } else {
        if (this.updateJl.did != "" && this.updateJl.pid != "") {
          this.postRequest("/organization/relation/", this.updateJl).then(
            (resp) => {
              this.dialogVisible = false;
              this.category = "";
              this.updateJl.did=''
              this.updateJl.pid=''
              this.updateJl.id=''
              this.positionName= ''
              this.filterText='请选择'
                this.initJls();
            }
          );
        } else {
          this.dialogVisible = true;
          this.$message("字段不能为空！");
        }
      }
    },

    //编辑
    showEditDialog(data) {
      this.isCompile = true;
     this.positionName=data.positionName
      Object.assign(this.updateJl, data);
      this.dialogVisible = true;
       this.filterText=data.organizationName
        this.initdJob();
    },

    //删除
    deleteHandler(data) {
      this.$confirm(
        "此操作将永久删除[" + data.positionName + "]职称, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          this.deleteRequest("/organization/relation/" + data.id).then(
            (resp) => {
              if (resp) {
                this.callFather(this.pageparm);
              }
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //添加
    addJobLevel() {
      this.isCompile = false;
       this.initdJob();
      this.dialogVisible = true;
    },
    //显示
    initJls(dada) {
      if (dada != undefined) {
        this.pageparm.currentPage = dada.currentPage;
        this.pageparm.pageSize = dada.pageSize;
      }
      this.getRequest(
        "/organization/relation/" +
          this.pageparm.currentPage +
          "/" +
          this.pageparm.pageSize +
          "?positionName=" +
          this.jl.positionName +
          "&organizationName=" +
          this.jl.organizationName
      ).then((res) => {
        this.jls = res.records;
        this.pageparm.currentPage = res.current;
        this.pageparm.pageSize = res.size;
        this.pageparm.total = res.total;
      });
    },
  },
};
</script>

<style scoped>
</style>